<template>
  <div class="home">
    <el-container>
      <el-header>输电线路外部隐患检测系统</el-header>
      <el-main>
        <el-row>
          <el-col :span="8"> <div>&nbsp;</div> </el-col>
          <el-col :span="8">
            <el-card class="box-card">
              <el-row>
                <el-col :span="8">
                  <el-upload
                    class="upload-demo"
                    ref="upload"
                    action="#"
                    :on-preview="handlePreview"
                    :before-upload="BeforeUpload"
                    :on-remove="handleRemove"
                    :file-list="fileList"
                    :http-request="open1"
                    :limit="10"
                    :on-exceed="handleExceed"
                    multiple
                  >
                    <el-button type="primary" icon="el-icon-upload2"
                      >导入</el-button
                    >
                    <div slot="tip" class="el-upload__tip">
                      只能上传jpg/png文件，且不超过500kb
                    </div>
                  </el-upload>
                </el-col>
                <el-col :span="8">
                  <el-button type="primary" @click="open" icon="el-icon-view"
                    >开始检测</el-button
                  >
                </el-col>
                <el-col :span="8">
                  <el-button
                    icon="el-icon-download"
                    type="primary"
                    @click="downImg"
                    >导出</el-button
                  >
                </el-col>
              </el-row>
            </el-card></el-col
          >
          <el-col :span="8"> <div>&nbsp;</div> </el-col>
        </el-row>
      </el-main>
    </el-container>
    <el-dialog
      title="输电线路外部隐患检测系统"
      :visible.sync="dialogVisible"
      width="50%"
      v-loading="loading"
      :before-close="handleClose"
    >
      <el-row>
        <el-clo :span="8">
          吊车类型：
          <el-select v-model="type" placeholder="请选择">
            <el-option
              v-for="item in typeOptions"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            >
            </el-option>
          </el-select>
        </el-clo>
        <el-clo :span="8">
          时间：
          <el-select v-model="time" placeholder="请选择">
            <el-option
              v-for="item in timeOptions"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            >
            </el-option>
          </el-select>
        </el-clo>
        <el-clo :span="8">
          <el-button type="primary" @click="select">筛选</el-button>
          <el-button type="primary" @click="empty">清空</el-button>
        </el-clo>
      </el-row>
      <el-table :data="tableData" style="width: 100%">
        <el-table-column prop="name" label="图片名">
          <template slot-scope="scope">
            <span @click="handleEdit(scope.row)">{{ scope.row.name }}</span>
          </template>
        </el-table-column>
        <el-table-column prop="type" label="隐患类型"> </el-table-column>
        <el-table-column prop="time" label="时间"> </el-table-column>
      </el-table>
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="dialogVisible = false"
          >关 闭</el-button
        >
      </span>

      <el-dialog
        width="50%"
        title=""
        :visible.sync="innerVisible"
        append-to-body
      >
        <!-- <el-image :src=imagePath fit="fill"></el-image> -->
        <img
          :src="imagePath"
          alt=""
          srcset=""
          fit="cover"
          width="500px"
          height="500px"
        />
      </el-dialog>
    </el-dialog>
  </div>
</template>

<script>
import { apiAddress, apiout, select } from "@/request/api"; // 导入我们的api接口
import JSZip from "jszip";
import FileSaver from "file-saver";

export default {
  name: "HomeView",
  components: {},
  data() {
    return {
      loading: false,
      innerVisible: false,
      dialogVisible: false,
      fileList: [],
      form: {
        imgSavePath: "",
      },
      type: "",
      time: "",
      newFile: [],
      tableData: [],
      outpics: [],
      outname: [],
      outtype: [],
      outtime: [],
      typeOptions: [],
      timeOptions: [],
      picname: "",
      imagePath: "",
    };
  },
  methods: {
    handleExceed(files, fileList) {
      this.$message.warning(
        `当前限制选择 10 个文件，本次选择了 ${files.length} 个文件，共选择了 ${
          files.length + fileList.length
        } 个文件`
      );
    },
    open1() {},
    BeforeUpload(file) {
      if (file) {
        this.newFile.push(file.name); //  2. 上传之前，拿到file对象，并将它添加到刚刚定义的FormData对象中。
      } else {
        return false;
      }
    },
    async select() {
      const res = await select({ type: this.type, time: this.time });
      if (res.code == 200) {
        this.tableData = res.data;
        this.loading = false;
      }
    },
    async empty() {
      this.type = null,
      this.time = null
    },
    async downImg() {
      const res = await apiout();
      if (res.code == 200) {
        this.$message.success("导出成功");
      } else {
        this.$message.success("导出失败");
      }
    },

    handleEdit(row) {
      this.innerVisible = true;
      this.picname = row.name;
      this.imagePath = require("../assets/result/" + this.picname);
    },
    handleRemove(file, fileList) {
      console.log(file, fileList);
    },
    async open() {
      console.log("this.newFile", this.newFile);
      this.dialogVisible = true;
      this.loading = true;
      const res = await apiAddress({ imageList: this.newFile.toString() });
      if (res.code == 200) {
        this.tableData = res.data;
        res.data.forEach((item) => {
          this.outpics.push(item.url);
          this.outname.push(item.name);
          this.outtype.push(item.type);
          this.outtime.push(item.time);
        });
        [...new Set(this.outtype)].forEach((aaa) => {
          this.typeOptions.push({ value: aaa, label: aaa });
        });
        [...new Set(this.outtime)].forEach((bbb) => {
          this.timeOptions.push({ value: bbb, label: bbb });
        });
        this.loading = false;
      }
    },
    handleClose() {
      this.dialogVisible = false;
      this.tableData = [];
    },
    handlePreview(file) {
      console.log(file);
    },
  },
};
</script>
